<template>
  <div>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell> -->
    <van-popup class="width" v-model="show">内容</van-popup>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
        @click="showPopup"
        icon="cart-o"
        text="购物车"
        badge="5"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-size: 0.3rem;
}
.width {
  width: 4rem;
  height: 4rem;
}
</style>
<script>
import Vue from "vue";
import { Button } from "vant";
import { Popup } from "vant";
import { Cell } from "vant";
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
Vue.use(Cell);
Vue.use(Button);
Vue.use(Popup);
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
};
</script>
